<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <title>老师首页</title>
    <style>
        /* 设置尺寸 */
        /* *{
            background: url("image/background.jpg");
        } */

        /*body{
            background-size: cover;
        }*/

        .header{
            width: 1000px;
            height: 35px;
            /* position:  absolute;
            left: 200px;
            display: flex;
            justify-content: space-between; */

        }

        .search {
            width: 200px;
            height: 30px;
            border-radius: 18px;
            outline: none;
            background-color: white;

            border: 1px solid #ccc;
            padding-left: 20px;
            right:350px;
            top: 10px;
            position: absolute;
            margin: 10px;
        }

        .btn {
            height: 30px;
            width: 30px;
            position: absolute;
            background: url("../image/search.png") no-repeat ;
            top: 15px;
            right: 350px;
            border: none;
            outline: none;
            cursor: pointer;
            margin: 10px;
        }

        span{
            float: left;
            margin: 10px;
        }

        .login{
            width: 250px;
            height: 30px;
            top: 16px;
            right: 100px;
            position: absolute;
        }

        iframe{
            background-size: cover;
        }

    </style>
</head>

<body>
<div id="app">
    <div class="header">
        <span>&nbsp;&nbsp;<img src="../image/logo.png"></span>
        <span style="font-size:30px ;margin: 10px">&nbsp;智&nbsp;&nbsp;慧&nbsp;&nbsp;云&nbsp;&nbsp;课&nbsp;&nbsp;堂</span>

    </div>

    <div class="header">
        <form class="parent">
            <input v-model="courseName" type="text" class="search" placeholder="搜索课程">
            <input type="button" class="btn" @click="selectCourse()">
        </form>
    </div>

    <div class="login">
        <span><a href="Set.html" target="_blank">设置&nbsp;</a></span>
        <span><a href="../login.html" th:href="@{/login}">登录&nbsp;</a></span>
        <span><a href="SignUp.html" target="_blank">注册</a></span>
        <span><img src="../image/user.jpg" style="width: 30px;height: 30px;border-radius: 50%"></span>
    </div>

    <div class="w3-sidebar w3-bar-block w3-#eee w3-card" style="width:130px">
        <!-- <h5 class="w3-bar-item">菜单</h5> -->
        <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Home')" >首页</button>
        <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'PublishVideo')">上传视频</button>
        <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Video')">课程视频</button>
        <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Service')">课后服务</button>
        <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Recruitment')">讲师招募</button>
    </div>

    <div style="margin-left:130px">
        <span style="color:#333333"><a href="/login.html"><--返回</a></span>

        <div id="Home" class="w3-container city w3-animate-opacity" style="display:none">
            <iframe src="../html/home.html" width="1200" height="800" frameborder="0"></iframe>
        </div>

        <div id="PublishVideo" class="w3-container city w3-animate-left" style="display:none">
            <iframe src="../html/publishVideo.html" width="1200" height="800" frameborder="0"></iframe>
        </div>

        <div id="Video" class="w3-container city w3-animate-right" style="display:none">
            <iframe src="../html/courseVideo.html" width="1400" height="800" frameborder="0"></iframe>
        </div>

        <div id="Service" class="w3-container city w3-animate-bottom" style="display:none">
            <iframe src="../html/complain.html" width="1000" height="800" frameborder="0"></iframe>
        </div>

        <div id="Recruitment" class="w3-container city w3-animate-zoom" style="display:none">
            <iframe src="../html/recruit.html" width="1000" height="800" frameborder="0"></iframe>
        </div>

    </div>

    <script>
        function openLink(evt, animName) {
            var i, x, tablinks;
            x = document.getElementsByClassName("city");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < x.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
            }
            document.getElementById(animName).style.display = "block";
            evt.currentTarget.className += " w3-red";
        }
    </script>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/element-ui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            courseName:'',
            pagination: {
                currentPage: 1,
                pageSize: 5,
                total: 10,
                queryString :null
            }
        },
        create() {
            this.findPage();
        },
        methods: {
            findPage(page = 1){
                this.pagination.currentPage = page
                let param = {
                    currentPage:this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                }

                axios.get('/teacher/findPage',{params:param}).then(response=>{
                    this.pagination.total = response.data.total
                    this.dataList = response.data.rows
                })
            },
            selectCourse(page = 1){
                let courseName = this.courseName;
                if (courseName == ''){
                    alert("输入有误");
                }else {
                    this.pagination.currentPage = page
                    let param = {
                        currentPage:this.pagination.currentPage,
                        pageSize: this.pagination.pageSize,
                        queryString: this.pagination.queryString
                    }

                    axios.get('/teacher/findPage',{params:param}).then(response=>{
                        this.pagination.total = response.data.total
                        this.dataList = response.data.rows
                    })
                }
            }
        }
    })
</script>
</body>

</html>